<!DOCTYPE html>
<html>
<head>
  <title>i18n Enhance</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css"/>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.1/bootstrap-table.min.css"/>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.1/bootstrap-table.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.1/locale/bootstrap-table-zh-TW.min.js"></script>

  <script src="bootstrap-table-i18n-enhance.js"></script>
  <script>
    $(function () {
      var $table = $("#table"),
          $buttons = $("button");

      $("#tw_Btn").click(function () {
        $buttons.removeClass("active");
        $(this).addClass("active");

        $table.bootstrapTable("changeLocale", "zh-TW");
        $table.bootstrapTable("changeTitle", {
          id: "代碼",
          name: "項目名稱",
          price: "項目金額"
        });
      });

      $("#us_Btn").click(function () {
        $buttons.removeClass("active");
        $(this).addClass("active");

        $table.bootstrapTable("changeLocale", "en_US");
        $table.bootstrapTable("changeTitle", {
          id: "ID",
          name: "Item Name",
          price: "Item Price"
        });
      });

    });
  </script>
</head>
<body>
<div class="container">
  <h1>i18n Enhance</h1>
  <label>Language:</label>
  <div class="btn-group" role="group" style="margin-bottom: 4px">
    <button id="tw_Btn" type="button" class="btn btn-default btn-sm active">zh_TW</button>
    <button id="us_Btn" type="button" class="btn btn-default btn-sm">en_US</button>
  </div>

  <table id="table"
         data-toggle="table"
         data-url="data.json"
         data-pagination="true">
    <thead>
    <tr>
      <th data-field="id">代碼</th>
      <th data-field="name">項目名稱</th>
      <th data-field="price">項目金額</th>
    </tr>
    </thead>
  </table>
</div>
</body>
</html>